<script setup>

import {reactive, ref} from "vue";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";

let data = reactive(({
  // 所有的表单数据由它装入
  form:{},
  activeName:'1',
  token: sessionStorage.getItem('token'),
  list0:[],
  list1:[],
  list2:[],
  list3:[],
  list4:[],
  list5:[],
  list6:[],
  list7:[],
  list8:[],
  // 判断有无数据需要展示
  isShow:false,
  dialogVisible:false,
  dialogImageUrl:'',
}));
/**
 *  根据报案号id获取图片信息
 */
const getByReportId = () => {
  uu.get("/busImage/getByReportId/" + data.form.reportId).then(result => {
    console.log(result)
    if (result.ok) {
      ElMessage({
        message: result.message,
        type: "success",
      })
      // 赋值
      data.list0 = result.data.list0;
      data.list1 = result.data.list1;
      data.list2 = result.data.list2;
      data.list3 = result.data.list3;
      data.list4 = result.data.list4;
      data.list5 = result.data.list5;
      data.list6 = result.data.list6;
      data.list7 = result.data.list7;
      data.list8 = result.data.list8;
      // 打开展示
      data.isShow = true;
    } else {
      ElMessage.error(result.message)// 显示失败提示 // 打开展示
      data.isShow = false;
    }
  })
}
// 上传成功后
const uploadSucess = () => {
  getByReportId()
}
/**
 * 删除图片
 */
const handleRemove = (file,files) => {
  // console.log(file)
  // 上传失败会默认调用 删除的钩子函数，当前的场景不需要，所以就在状态为 ready 时结束函数
  if (file.status === "ready"){
    return
  }
  let id = file.id
  uu.delete("/busImage/delImg/" + id).then(result => {
    console.log(result)
    if (result.ok) {
      ElMessage({
        message: result.message,
        type: "success",
      })
    } else {
      ElMessage.error(result.message)// 显示失败提示 // 打开展示
      data.isShow = false;
    }
  })
}
/*
  图片上传前的函数
 */
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile)
  if (rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
    ElMessage.error('请选择正确的图片类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB!')
    return false
  }
}

/*
  超出图片限制时的函数
 */
const exceed = () => {
  ElMessage.error("图片超出预定大小,最大数量为10")
}
/*
  大图展示
 */
const handlePictureCardPreview = (uploadFile) => {
  data.dialogVisible =true
  data.dialogImageUrl = uploadFile.url
}

</script>

<template>
  <el-form :inline="true" :model="data.form" class="demo-form-inline" style="width: 100%">
    <!-- 便捷查询区域-->
    <div>
      <el-form-item label="报案号">
        <el-input v-model="data.form.reportId" clearable placeholder="请输入报案号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getByReportId()">数据查询</el-button>
      </el-form-item>
    </div>
  </el-form>
  <!-- 具体的图片信息区域，手风琴效果  -->
  <div class="demo-collapse" v-if="data.isShow">
    <el-collapse v-model="data.activeName" accordion >
      <el-collapse-item name="1">
        <template #title>
          <el-tag   type='success' disable-transitions  v-if="data.list0 && data.list0.length > 0" >已上传</el-tag>
          <el-tag type='danger' disable-transitions  v-else >未上传</el-tag>
          <span style="margin-left: 5px">查勘定损照片</span>
        </template>
          <el-upload
              v-model:file-list="data.list0"
              :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/0'"
              :headers="{token:data.token}"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="uploadSucess"
              limit="10"
              :on-exceed ="exceed"
              :before-upload="beforeAvatarUpload"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="2">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list1 && data.list1.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions    v-else  >未上传</el-tag>
          <span style="margin-left: 5px">出险及索赔申请书</span>
        </template>
        <el-upload
            v-model:file-list="data.list1"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/1'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="3">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list2 && data.list2.length > 0 ">已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">现场查勘报告</span>

        </template>
        <el-upload
            v-model:file-list="data.list2"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/2'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="4">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list3 && data.list3.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">技术鉴定材料/定损标准</span>
        </template>
        <el-upload
            v-model:file-list="data.list3"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/3'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="5">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list4 && data.list4.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">出险证明材料</span>
        </template>
        <el-upload
            v-model:file-list="data.list4"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/4'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="6">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list5 && data.list5.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">分户定损及理算清单</span>
        </template>
        <el-upload
            v-model:file-list="data.list5"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/5'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="7">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list6 && data.list6.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">理赔报告</span>
        </template>
        <el-upload
            v-model:file-list="data.list6"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/6'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item name="8">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list7 && data.list7.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">公示照片</span>
        </template>
        <el-upload
            v-model:file-list="data.list7"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/7'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
      <el-collapse-item  name="9">
        <template #title>
          <el-tag  type='success' disable-transitions  v-if="data.list8 && data.list8.length > 0 " >已上传</el-tag>
          <el-tag type='danger' disable-transitions v-else >未上传</el-tag>
          <span style="margin-left: 5px">其他</span>
        </template>
        <el-upload
            v-model:file-list="data.list8"
            :action="'http://localhost:8080/busImage/addImg/'+data.form.reportId+'/8'"
            :headers="{token:data.token}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadSucess"
            limit="10"
            :on-exceed ="exceed"
            :before-upload="beforeAvatarUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-collapse-item>
    </el-collapse>
  </div>
  <span>请根据报案号查询以此获得信息</span>

  <el-dialog v-model="data.dialogVisible" width="70%">
    <img w-full :src="data.dialogImageUrl" alt="Preview Image" width="100%" height="50%" />
  </el-dialog>
</template>

<style scoped>

</style>